<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=640,user-scalable=no">
		<title>详情页</title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="css/详情页.css"/>
	</head>
	<body>
	<div id="app" class="zzj_warp">
		<div id="Big_div"><!-- 内容用一个大盒子装起来 -->	
		<div class="zzj_img"><img :src="immg" ></div>
		<!-- 价格div开始 -->
		<div class="zzj_jiage">
			<p class="zzj_jiage_p1">{{text1}}</p>
			<p class="zzj_jiage_p2">
				<span class="span1">{{tt2}}</span>
				<span class="span2"><s>{{tt3}}</s></span>
				<span class="span3">{{tt4}}</span>
			</p>
		</div>
		<!-- 价格div结束 -->
		<!-- 更多详情开始 -->
		<div class="zzj_gengduo">
			<div class="zzj_gengduo_box">
				<p class="zzj_gengduo_p">{{text2|xx(nub2,str2)}}</p>
				<a @click="open()">{{xiang}}</a>
			</div>
		</div>
		<!-- 更多详情结束 -->
		
		<!-- 固定立即购买开始 -->
		<div class="zzj_lijigoumai">
			<a href="联系卖家.html"><div class="bottom_box1"></div></a>		
			<div @click="souchang()" :class="iddx==-1?'bottom_box2':'bottom_box22'"></div>		
			<a href="购物车2.html"><div class="bottom_box3">{{jiarugwc}}</div></a>
			<a href="确认订单.html"><div class="bottom_box4">{{lijigm}}</div></a>
		</div>
		<!-- 立即购买结束 -->
		</div>
		<!-- 大盒子结束 -->
	</div>	
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				immg:"img/洗面奶2.jpg",
				tt2:"价格：￥998",
				tt3:"￥1500",
				tt4:"运费：免运费",
				jiarugwc:"加入购物车",
				lijigm:"立即购买",
				biaoti:"优纪洗面奶黑头男士基酸洗面奶深层清洁痘痘收缩毛孔男女士洁面乳 120g",
				text1:"优纪洗面奶黑头男士基酸洗面奶深层清洁痘痘收缩毛孔男女士洁面乳 120g",
				text2:"优纪洗面奶黑头男士基酸洗面奶深层清洁痘痘收缩毛孔男女士洁面乳 120g,优纪洗面奶黑头男士基酸洗面奶深层清洁痘痘收缩毛孔男女士洁面乳 120g.",
				str:".....",
				nub1:10,
				nub2:60,
				str2:".....",
				isShow:false,
				xiang:"更多详情",
				iddx:-1,
			},
			filters:{
				xx:function(aa,cont,str){
					if(aa.length>cont){
						return aa.slice(0,cont)+str;
					}else{
						return aa;
					}
				}
			},
			methods:{
				open(){
					if(this.isShow){
						this.str2=".....";
						this.nub2=60;
						this.xiang="更多详情";
						// this.isShow=false;
					}else{
						this.str2='';
						this.nub2=this.text2.length;
						this.xiang="收起详情";
						// this.isShow=true;
					}
					this.isShow=!this.isShow;
				},
				souchang(l1){
					this.iddx = this.iddx == l1 ? -1 : l1;
				}
			}
		})
	</script>
	
	
</html>
